<template>
  <div class="home-container">
    <banner-wrap></banner-wrap>
    <div class="content-area">
      <fold-gallery :foldList="foldImgs"></fold-gallery>
      <destination-index
        :internalTypes="internalTypes"
        :internalImgs="internalImgs"
        :foreginTypes="foreginTypes"
        :foreginImgs="foreginImgs"
      ></destination-index>
      <trip-guide
      :guide="guide"
      ></trip-guide>
    </div>
  </div>
</template>
<script>
/* eslint-disable */

import BannerWrap from "./components/Banner";
import FoldGallery from "../../components/Gallery";
import DestinationIndex from "./components/DestinationIndex";
import TripGuide from "./components/TripGuide";

import axios from "axios";
import { homeServices } from "../../common/services/home-services";

export default {
  name: "Home",
  components: {
    BannerWrap,
    FoldGallery,
    DestinationIndex,
    TripGuide
  },
  data() {
    return {
      foldImgs: [],
      internalTypes: [],
      internalImgs: [],
      foreginTypes: [],
      foreginImgs: [],
      guide: {}
    };
  },
  methods: {
    getHomeInfo() {
      axios
        .get("/api/home.json")
        .then(this.handleSuccess)
        .catch(error => console.log(error));
    },
    handleSuccess(res) {
      res = res.data;
      if (res.success && res.data) {
        const data = res.data;
        this.foldImgs = data.foldImgs;
        this.internalTypes = data.internal.types;
        this.internalImgs = data.internal.imgs;
        this.foreginTypes = data.foregin.types;
        this.foreginImgs = data.foregin.imgs;
        this.guide = data.guide;
      }
    }
  },
  mounted() {
    this.getHomeInfo();
    homeServices.getHomeInfo(function(data) {
      console.log(data);
    });
  }
};
</script>
<style lang="scss" scoped>
.home-container {
  padding-bottom: 5em;
}
.content-area {
  margin: 0 auto;
  width: 70em;
}
</style>
